<template>
    <div class="app-container">
        <div class="layout-content">
            <transition :name="that.animation">
                <router-view class="routerView"></router-view>
            </transition>
        </div>
        <div class="layout-footer">
            <TabBar :data="that.tabbars" @change="handleChange" />
        </div>
    </div>
</template>
  
<script setup>
import TabBar from '@/components/TabBar.vue'
import usePub from '@/utils/pub-use.js'
import { reactive, onMounted } from 'vue'

const Pub = usePub()
const getAssetsFile = Pub.getAssetsFile
onMounted(() => {
    console.log('-------',getAssetsFile);
    console.log('-------',Pub);
    console.log('-------',usePub);
})
let that = reactive({
    animation: 'slide-left',
    tabbars: [
        {
            title: '首页',
            to: {
                name: 'Index'
            },
            icon: {
                active: usePub("/home-active.png"),
                inactive: usePub("/home.png"),
            }
        },
        {
            title: '课程',
            to: {
                name: 'Course'
            },
            icon: {
                active: usePub("/course-active.png"),
                inactive: usePub("/course.png"),
            }
        },
        {
            title: '约课记录',
            to: {
                name: 'Record'
            },
            icon: {
                active: usePub("/study-active.png"),
                inactive: usePub("/study.png"),
            }
        },
        {
            title: '练习',
            to: {
                name: 'Practice'
            },
            icon: {
                active: usePub("/course-active.png"),
                inactive: usePub("/course.png"),
            }
        },
        {
            title: '我的',
            to: {
                name: 'Main'
            },
            icon: {
                active: usePub("/user-active.png"),
                inactive: usePub("/user.png"),
            }
        }
    ]
})
// watch(() => {
//     $route=(to) =>{
//         console.log(to)
//         if (to.meta.tier != 1) {
//             this.animation = 'slide-left'
//         } else {
//             this.animation = 'slide-right'
//         }
//     }
// })


let handleChange = (v) => {
    // console.log('tab value:', v)
}


</script>
<style lang="scss" scoped>
.routerView {
    position: absolute;
    left: 0;
    top: 0;
}

//左滑动画和右滑动画
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
    transition: all 2s ease;
    position: absolute;
}

.slide-left-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

.slide-left-leave-to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-right-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-right-leave-to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>